<template>
	<view class="qrcode-wrap">
		<view class="top-nav-box" :style="{height:navHeight, paddingTop:statusBarHeight}">
			<image class="top-nav-back" src="../../../static/images/icon_user_back.png" @click="getback"></image>
		</view>
		<image src="../../static/qrcode_page_title.png" style="width: 440rpx;margin-top: 250rpx;" mode="widthFix">
		</image>
		<view class="qrcode-con">
			<image :src="path" :show-menu-by-longpress="true" style="width: 462rpx;height: 462rpx;margin-top: 62rpx;"
				mode="aspectFit"></image>
		</view>
		<!-- <view class="qrcode-btn" @tap="saveImageToAlbum"></view> -->
		<view style="font-size: 28rpx;color: #fff;margin-top: 20rpx;">长按识别添加专属客服</view>
		<!-- 		<view class="qrcode-tips">
			<view class="qrcode-text">周三会员日<br>会员折上折</view>
			<view class="qrcode-line"></view>
			<view class="qrcode-text">5元无门槛<br>优惠券</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import Cache from "@/utils/cache";
	import {
		strToParams
	} from "@/utils/tools";
	import {
		SHOP_INFO
	} from "@/config/cachekey";
	export default {
		data() {
			return {
				path: "../../static/qrcode_page_code.png"
			};
		},


		onLoad() {
			const options = this.$Route.query;
			if (options && options.scene) {
				const scene = strToParams(decodeURIComponent(options.scene));
				options.qrcode = scene.qrcode;
			}
			if (options.qrcode) {
				this.path = options.qrcode;
			} else {
				if (this.shopInfo.current_shop || Cache.get(SHOP_INFO).current_shop) {
					this.path = this.shopInfo.current_shop ? this.shopInfo.current_shop.kefu_image : Cache.get(
						SHOP_INFO).current_shop.kefu_image;
				}
			}
		},

		computed: {
			...mapGetters(["sysInfo", "shopInfo"]),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				return this.sysInfo.navHeight + 'px'
			}
		},

		methods: {
			saveImageToAlbum() {
				let that = this;
				// #ifndef H5
				uni.getImageInfo({
					src: that.path,
					success: function(res) {
						let path = res.path;
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success(res) {
								that.$toast({
									title: '保存成功'
								})
							},
							fail(res) {
								that.$toast({
									title: '保存失败'
								})
							}
						})
					}
				})
				// #endif

				// #ifdef H5
				this.$toast({
					title: '请长按图片保存'
				})
				// #endif

			},
			getback() {
				//#ifdef H5
				this.$router.go(-1); //返回上一层
				//#endif

				//#ifdef MP-WEIXIN
				uni.navigateBack({
					delta: 1
				});
				//#endif
			}
		}
	};
</script>

<style lang="scss">
	.qrcode-wrap {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: #fff;
		background-image: url(../../static/qrcode_page_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;

		.top-nav-box {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 200rpx;
			top: 0;
			z-index: 1;

			.top-nav-back {
				width: 58rpx;
				height: 58rpx;
			}
		}

		.qrcode-con {
			background-color: #fff;
			width: 586rpx;
			height: 586rpx;
			margin: 60rpx auto;
			border-radius: 20rpx;
		}

		.qrcode-btn {
			width: 408rpx;
			height: 82rpx;
			margin: 0 auto;
			background-image: url(../../static/qrcode_page_btn.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.qrcode-tips {
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #fff;

			.qrcode-text {
				text-align: left;
			}

			.qrcode-line {
				height: 72rpx;
				margin: 0 50rpx;
				border-left: solid 2rpx #fff;
			}
		}
	}
</style>